<script lang="ts">
  // import svelteLogo from "./assets/svelte.svg";
  import DrawerContent from "./lib/DrawerContent.svelte";
  import DrawerHandle from "./lib/DrawerHandle.svelte";
  import type { ResourceList } from "./type";
  import { onMount } from "svelte";
  import { getCurCategoryId } from "./service";
  export let systemId: string;
  export let slicePoint: number = 3;
  export let resourceList: ResourceList[];

  let open = false;
  let top = 0;
  function moveToNewTop(newTop) {
    if (newTop >= window.innerHeight - 40) {
      top = window.innerHeight - 40;
    } else if (newTop <= 5) {
      top = 5;
    } else {
      top = newTop;
    }
  }
  function handleClick(e) {
    if (open) {
      return;
    }
    open = true;
  }
  function handleClose() {
    open = false;
  }

  let curCategoryId = "";
  onMount(() => {
    if (!curCategoryId) {
      curCategoryId = getCurCategoryId(resourceList, systemId, slicePoint);
    }
    if (!top) {
      top = window.innerHeight - 100;
    }
  });
  export const setMenuCode = () => {
    open = false;
    curCategoryId = getCurCategoryId(resourceList, systemId, slicePoint);
  };
</script>

<div class="drawer" style="--top:{top + 'px'}">
  {#if open}
    <DrawerContent {open} categoryId={curCategoryId} {systemId} {handleClose} />
  {/if}

  {#if curCategoryId}
    <DrawerHandle {top} {moveToNewTop} {handleClick} />
  {/if}
</div>

<style lang="less" scoped>
  * {
    box-sizing: border-box;
  }
  .drawer {
    position: fixed;
    z-index: 999;
    right: 0;
    top: 0;
    width: 0;
    height: 100%;
    position: fixed;
    box-sizing: border-box;
  }
</style>
